<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="./css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="./css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<title></title>
		<style>
			.active1 {
			position: relative;
		}
		
		.active1::after {
			content: "";
			animation: myfadein2 .5s linear both;
			animation-duration: 3s;
			position: absolute;
			top: -9px;
			left: 0;
			width: 90vw;
			height: 30px;
			/* transform: translateX(-24%); */
			background-image: url(images/select.png);
			background-position: center;
			background-size: cover;
			transition: all .5s;
			opacity: 0;
		}
		</style>

	</head>
	<body>
		<div class="loadding" style="width: 100%;height: 100%;background-color: #2e3c58;z-index: 99;position: absolute;top: 0;left: 0;right: 0;bottom: 0;color: #fff;">加载中。。。</div>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<!-- 1 -->
				<div class="swiper-slide" style="background-image: url(images/bg.png);">
					<img src="images/11.png" class="a-1 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s"
					 swiper-animate-delay="1s">
					<img src="images/10.png" class="a-0 ani" swiper-animate-effect="flicker-out-1" swiper-animate-duration=".6s"
					 swiper-animate-delay=".2s">
					<img src="images/12.png" class="a-2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s"
					 swiper-animate-delay="2s">
					<img src="images/121.png" class="a-21 ani" swiper-animate-effect="mv" swiper-animate-duration="1.5s"
					 swiper-animate-delay="2s">
					<img src="images/13.png" class="a-3 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s"
					 swiper-animate-delay="3s">

					<div class="text">
						<div class="a ani" swiper-animate-effect="myfadein" swiper-animate-duration="3s" swiper-animate-delay="4s">
							<p>晴空一阵霹雳响</p>
							<p>你穿越回到了5年前——2015年6月18日</p>
							<p>你瞄准了同城配送这片蓝海</p>
							<p>准备和几个同伴一起创业</p>
						</div>
						<div class="b ani" swiper-animate-effect="myfadein" swiper-animate-duration="3s" swiper-animate-delay="7s">
							<p>有天梦里经大师指点</p>
							<p>你决定给公司起名【UU跑腿】</p>
						</div>
						<div class="b ani" swiper-animate-effect="myfadein2" swiper-animate-duration="3s" swiper-animate-delay="10s">
							<p>经过一个月的研发</p>
							<p>APP首个版本出生了~</p>
						</div>
					</div>

					<img src="images/up.png" class="ani up" swiper-animate-effect="aup" swiper-animate-duration="3s"
					 swiper-animate-delay="5s">


				</div>


				<!-- 2 -->
				<div class="swiper-slide swiper-no-swiping" style="background-image: url(images/bg.png);">

					<div class="info ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
						<div class="tit">第1/6题</div>
						<div class="ti">
							<p>没有用户,没有跑男</p>
							<p>没有人知道UU,你打算先做什么？</p>
						</div>
						<div class="pink">
							<p class="ti ti0">A、发朋友圈打卡留念~ </p>
							<p class="ti ti0">B、打最贵的广告！ </p>
							<p class="ti ti0">C、先做做市场调研 </p>
							<p class="ti ti0">D、招些专业人士去做 </p>
						</div>

					</div>
					<img src="images/2-1.png" class="ani" style="position: absolute;top: 0%;left: 0;right: 0;width: 100%;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<img src="images/121.png" class="ani" style="position: absolute;top: 35%;right: 30%;width: 6%;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">

				</div>


				<!-- 3333 -->
				<div class="swiper-slide" style="background-image: url(images/bg.png);">
					<img class="ani" src="images/31.png" style="position: absolute;top: 0;left: 0;width: 100%;" swiper-animate-effect="fadeIn"
					 swiper-animate-duration="1s" swiper-animate-delay="1s">
					<div class="ani" style="position: absolute;bottom: 10vh;left: 0;right: 0;text-align: center;font-size: 14px;color: #fff;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.8s">
						<p>得到很多奖励</p>
						<p>你更有斗志了</p>
					</div>
					<img src="images/up.png" class="ani up" swiper-animate-effect="aup" swiper-animate-duration="3s"
					 swiper-animate-delay="4s">
				</div>


				<!-- 444 -->
				<div class="swiper-slide" style="background-image: url(images/bg2.png);">
					<img src="images/41.png" class="ani a-4" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
					 swiper-animate-delay=".5s">
					<img src="images/42.png" class="ani a-4" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
					 swiper-animate-delay="1.3s">

					<div class="ani" style="font-size: 14px;color: #fff;text-align: center;position: absolute;bottom: 10vh;left: 0;right: 0;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.9s">
						<p>
							恭喜你！有了首波用户和跑男~</p>
						<p>
							15年夏天，“帮我买小龙虾”订单猛增</p>
					</div>
					<img src="images/up.png" class="ani up" swiper-animate-effect="aup" swiper-animate-duration="3s"
					 swiper-animate-delay="3s">
				</div>


				<!-- 55555 -->
				<div class="swiper-slide swiper-no-swiping" style="background-image: url(images/bg2.png);">
					<img src="./images/43.png" class="ani" style="position: absolute;top: 0;left: 0;right: 0;width: 100%;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<div class="info ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
						<div class="tit">第2/6题</div>
						<div class="ti">
							<p>跑男不够啊，怎么办？</p>
						</div>
						<div class="pink">
							<p class="ti ti2">A、亲自上阵送货去 </p>
							<p class="ti ti2">B、全城投放招募广告 </p>
							<p class="ti ti2">C、挖竞争公司员工 </p>
							<p class="ti ti2">D、找已有跑男拉人 </p>
						</div>

					</div>

				</div>

				<!-- 6666 -->
				<div class="swiper-slide" style="background-image: url(images/bg2.png);">
					<img src="images/61.png" class="ani a-4" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
					 swiper-animate-delay=".5s">
					<div class="ani" style="font-size: 14px;color: #fff;text-align: center;position: absolute;bottom: 10vh;left: 0;right: 0;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.3s">
						<p> 吁~经过一个夏天的努力</p>
						<p> 小龙虾平均37分钟送达</p>
						<p>还有些烫呢！</p>
					</div>

					<img src="images/up.png" class="ani up" swiper-animate-effect="aup" swiper-animate-duration="3s"
					 swiper-animate-delay="3s">
				</div>


				<!-- 7777 -->
				<div class="swiper-slide" style="background-image: url(images/bg2.png);">
					<img src="images/71.png" class="ani a-4" style="width: 60%;top:31vh;transform: translateX(35%);"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<div class="ani" style="font-size: 14px;color: #fff;text-align: center;position: absolute;top: 10vh;left: 0;right: 0;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.3s">
						<p> 这天，你收到了交警的表扬</p>
						<p> 因为你的疯狂招募</p>
						<p>解决了城市非法摩的问题</p>
					</div>

					<img src="images/up.png" class="ani up" swiper-animate-effect="aup" swiper-animate-duration="3s"
					 swiper-animate-delay="3s">
				</div>

				<!-- 8888 -->
				<div class="swiper-slide" style="background-image: url(images/bg3.png);">
					<img src="images/81.png" class="ani a-4" style="width: 60%;top:0;transform: translateX(35%);"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<img src="images/80.png" class="ani a-4" style="width: 90%;top:0;transform: translateX(4%);" swiper-animate-effect="fadeIn"
					 swiper-animate-duration="1s" swiper-animate-delay="1.5s">

					<div class="ani" style="font-size: 14px;color: #fff;text-align: center;position: absolute;bottom: 20vh;left: 0;right: 0;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2.3s">
						<p> 最近收到很多用户建议</p>
						<p> 蛋糕送达会有损坏</p>
					</div>

					<img src="images/up.png" class="ani up" swiper-animate-effect="aup" swiper-animate-duration="3s"
					 swiper-animate-delay="3s">
				</div>
				<!-- 9999 -->
				<!-- 3ti -->
				<div class="swiper-slide swiper-no-swiping" style="background-image: url(images/bg3.png);">
					<img src="./images/82.png" class="ani" style="position: absolute;top: 5vh;left: 7vh;right: 0;width: 80%;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<div class="info ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
						<div class="tit">第3/6题</div>
						<div class="ti">
							<p>你该如何减少此类事故？</p>
						</div>
						<div class="pink">
							<p class="ti ti3">A、假装没看到 </p>
							<p class="ti ti3">B、订单保价，坏必赔 </p>
							<p class="ti ti3">C、提供蛋糕保温袋 </p>
							<p class="ti ti3">D、加强跑男培训 </p>
						</div>

					</div>
				</div>

				<!-- 10 -->
				<div class="swiper-slide" style="background-image: url(images/bg3.png);">
					<img src="./images/x.png" class="ani" style="position: absolute;top: 5vh;left: 7vh;right: 0;width: 80%;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<div class="info ani" style="margin: 60vh auto;color: #fff;" swiper-animate-effect="fadeIn"
					 swiper-animate-duration="1s" swiper-animate-delay="1.5s">
						<p>有个自称</p>
						<p> UU跑腿CEO乔松涛的人提醒您</p>
						<p>每条用户建议都是财富！！！</p>
					</div>
					<img src="images/up.png" class="ani up" swiper-animate-effect="aup" swiper-animate-duration="3s"
					 swiper-animate-delay="3s">
				</div>

				<!-- 11 -->
				<div class="swiper-slide" style="background-image: url(images/bg2.png);">
					<img src="./images/x1.png" class="ani" style="position: absolute;top: 5vh;left: 7vh;right: 0;width: 80%;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<div class="info ani" style="margin: 60vh auto;color: #fff;" swiper-animate-effect="fadeIn"
					 swiper-animate-duration="1s" swiper-animate-delay="1.5s">
						<p>随着公司业务日益增加</p>
						<p>你天天忙得不可分身</p>
						<p>是时候去扩大团队规模了</p>
					</div>
					<img src="images/up.png" class="ani up" swiper-animate-effect="aup" swiper-animate-duration="3s"
					 swiper-animate-delay="3s">
				</div>

				<!-- 12 -->
				<div class="swiper-slide swiper-no-swiping" style="background-image: url(images/bg2.png);">
					<img src="./images/x3.png" class="ani" style="position: absolute;top: 5vh;left: 7vh;right: 0;width: 80%;"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<div class="info ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
						<div class="tit" style="color: #ffcfb3;">第4/6题</div>
						<div class="ti">
							<p>作为创业公司，你想先招募哪种员工？</p>
						</div>
						<div class="pink">
							<p class="ti ti4">A、一线大厂专家王大佬 </p>
							<p class="ti ti4">B、有才能但自负的宋不屑 </p>
							<p class="ti ti4">C、有经验但跳槽频繁的李忙忙 </p>
							<p class="ti ti4">D、毫无经验的菜鸟赵小白 </p>
						</div>

					</div>

				</div>
				<!-- 13 -->
				<div class="swiper-slide" style="background-image: url(images/bg2.png);">
					<img src="./images/x4.png" class="ani" style="position: absolute;top: 5vh;left: 7vh;right: 0;width: 80%;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<div class="info ani" style="margin: 60vh auto;color: #fff;" swiper-animate-effect="fadeIn"
					 swiper-animate-duration="1s" swiper-animate-delay="1.5s">
						<p>大佬拒绝了你</p>
						<p>但推荐了一位得力下属</p>
					</div>
					<img src="images/up.png" class="ani up" swiper-animate-effect="aup" swiper-animate-duration="3s"
					 swiper-animate-delay="3s">
				</div>
				<!-- 14 -->
				<div class="swiper-slide" style="background-image: url(images/bg3.png);">
					<img src="./images/xx.png" class="ani" style="position: absolute;bottom: 0vh;left: 0vh;right: 0;width: 100%;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<div class="info ani" style="margin: 60vh auto;color: #fff;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
						<p>叮！</p>
						<p>你的商业版图可以扩展了！</p>
					</div>
					<img src="images/up.png" class="ani up" swiper-animate-effect="aup" swiper-animate-duration="3s" swiper-animate-delay="3s">
				</div>

				<!-- 15 -->
				<div class="swiper-slide" style="background-image: url(images/bg2.png);">
					<img src="./images/x5.png" class="ani" style="position: absolute;top: 5vh;left: 7vh;right: 0;width: 80%;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<div class="info ani" style="margin: 60vh auto;color: #fff;" swiper-animate-effect="fadeIn"  swiper-animate-duration="1s" swiper-animate-delay="1.5s">
						<p>忙忙上手很快</p>
						<p>但跳槽也很快</p>
					</div>
					<img src="images/up.png" class="ani up" swiper-animate-effect="aup" swiper-animate-duration="3s" swiper-animate-delay="3s">
				</div>
				<!-- 16 -->
				<div class="swiper-slide" style="background-image: url(images/bg2.png);">
					<img src="./images/aa.png" class="ani" style="position: absolute;top: 5vh;left: 0vh;right: 0;width: 100%;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<img src="./images/a.png" class="ani" style="position: absolute;top: 21vh;left: 7vh;right: 0;width: 80%;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<div class="info ani" style="margin: 45vh auto;color: #fff;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
						<p>公司队伍的扩大</p>
						<p>给业务带来了突破</p>
						<p>有位投资人找上门</p>
						<p>给了你2亿的融资!</p>
					</div>
					<img src="images/up.png" class="ani up" swiper-animate-effect="aup" swiper-animate-duration="3s" swiper-animate-delay="3s">
				</div>
				<!-- 17 -->
				<!-- ti5 -->
				<div class="swiper-slide swiper-no-swiping" style="background-image: url(images/bg3.png);">
					<img src="./images/80.png" class="ani" style="position: absolute;top: 5vh;left: 0vh;right: 0;width: 100%;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<img src="./images/121.png" class="ani" style="width: 40px;position: absolute;top: 10vh;right: 10vh;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
					<div class="info ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
						<div class="tit">第5/6题</div>
						<div class="ti">
							<p>公司里有了不同的声音</p>
							<p>你选择听谁的意见？</p>
						</div>
						<div class="pink">
							<p class="ti ti5">A、等等吧，成本太高了！ </p>
							<p class="ti ti5">B、今年要覆盖掉全国市场 </p>
							<p class="ti ti5">C、先选几个城市试验 </p>
							<p class="ti ti5">D、去新加坡！那里抖音粉丝超多 </p>
						</div>

					</div>
				</div>
				<!-- 18 -->
				<div class="swiper-slide" style="background-image: url(images/bg3.png);">
					<img src="./images/map.png" class="ani" style="position: absolute;top: 5vh;left: 5vh;right: 0;width: 80%;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<img src="./images/logo.png" class="ani" style="width: 30px;position: absolute;top: 18vh;right: 17vh;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1s">
					<img src="./images/line.png" class="ani" style="width: 55%;position: absolute;top: 13vh;right: 11vh;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
					<img src="./images/dot.png" class="ani" style="width: 55%;position: absolute;top: 13vh;right: 11vh;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2s">
					<div class="info ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2.5s">
						<div class="tip">
							<p>Tips:截至目前，</p>
							<p>UU跑腿在全国共开通176个城市</p>
						</div>
					</div>
					<img src="images/up.png" class="ani up" swiper-animate-effect="aup" swiper-animate-duration="3s" swiper-animate-delay="3s">
				</div>
				<!-- 19 -->
				<!-- ti6 -->
				<div class="swiper-slide swiper-no-swiping" style="background-image: url(images/bg6.png);">
					<img src="./images/ti62.png" class="ani" style="position: absolute;top: 5vh;left: 0vh;right: 0;width: 100%;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<img src="./images/ti6.png" class="ani" style="width: 59%;position: absolute;top: 30vh;right: 10vh;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
					<div class="info ani" style="margin: 60vh auto;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
					 swiper-animate-delay="1.5s">
						<div class="tit">第6/6题</div>
						<div class="ti">
							<p>你该如何解决？</p>
						</div>
						<div class="pink">
							<p class="ti ti6">A、推出无接触配送服务 </p>
							<p class="ti ti6">B、给跑男免费送口罩 </p>
							<p class="ti ti6">C、停掉业务，跑男接单太危险 </p>
						</div>

					</div>
				</div>
				<!-- 20 -->
				<div class="swiper-slide" style="background-image: url(images/bg6.png);">
					<img src="./images/e.png" class="ani" style="position: absolute;top: 5vh;left: 17vh;right: 0;width: 45%;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<img src="./images/eee.png" class="ani" style="position: absolute;top: 25vh;left: 0vh;right: 0;width: 50%;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1s">
					<img src="./images/ee.png" class="ani" style="position: absolute;top: 25vh;right: 0;width: 40%;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
					<div class="info ani" style="margin: 60vh auto;color: #fff;" swiper-animate-effect="fadeIn"
					 swiper-animate-duration="1s" swiper-animate-delay="2s">
						<p>你免费给跑男发放口罩每日测量体温</p>
						<p>你主动提供无接触配送</p>
						<p>给用户&跑男提供公益口罩50万个</p>
					</div>

					<img src="images/up.png" class="ani up" swiper-animate-effect="aup" swiper-animate-duration="3s"
					 swiper-animate-delay="3s">
				</div>
				<!-- 21 -->

				<div class="swiper-slide" style="background-image: url(images/bg6.png);">
					<img src="./images/s.png" class="ani " style="position: absolute;top: 0;left: 0vh;right: 0;width: 100%;"
					 swiper-animate-effect="mvlin" swiper-animate-duration="10s" swiper-animate-delay="0s">
					<img src="./images/s.png" class="ani a2" swiper-animate-effect="mvlin" swiper-animate-duration="10s"
					 swiper-animate-delay="0s">
					<img src="./images/car.png" class="ani" style="position: absolute;top: 35vh;left: 37vh;right: 0;width: 70px;"
					 swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".5s">
					<div class="info ani" style="margin: 60vh auto;color: #fff;" swiper-animate-effect="fadeIn"
					 swiper-animate-duration="1s" swiper-animate-delay="2s">
						<p>空无一人的大街上</p>
						<p>始终有道橙色的身影</p>
					</div>

					<img src="images/up.png" class="ani up" swiper-animate-effect="aup" swiper-animate-duration="3s"
					 swiper-animate-delay="3s">
				</div>
				<!-- 22 -->
				<div class="swiper-slide" style="background-image: url(images/bg6.png);">
					<img src="./images/g.png" class="ani" style="position: absolute;bottom: 0;left: 0vh;right: 0;width: 100%;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
					<img src="./images/gg.png" class="ani" style="position: absolute;bottom: 0;left: 0vh;right: 0;width: 100%;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay=".8s">
					<div class="info ani" style="color: #fff;margin: 10vh auto;font-size: 14px;" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2s">
						<p>2016年，UU跑腿西安、深圳、北京开通运营</p>
						<p>2017年，UU跑腿荣获9600万A轮融资</p>
						<p>2018年，UU跑腿荣获2亿B轮融资</p>
						<p>2019年，UU跑腿一共开通176个城市</p>
					</div>

					<img src="images/up.png" class="ani up" swiper-animate-effect="aup" swiper-animate-duration="3s" swiper-animate-delay="3s">
				</div>
				<!-- 23 -->
				<div class="swiper-slide" style="background-image: url(images/bge.png);background-size: 100% 100%;">
					<img src="images/tit.png" style="position: absolute;top: 35px;left: 50%;width: 70px;height: 20px;margin-left: -35px;">
					<div class="user" style="color: #fff;margin-top: 15vh;">
						<img src="./images/d.png" style="width: 55px;height: 55px;margin: 0 auto;">
						<p>一号神秘用户</p>
						<p>当上了UU跑腿的</p>
					</div>
					<img src="images/info.png" style="width: 330px; margin: 2vh auto 0;" >
					<div class="in" style="color: #fff; font-size: 14px;">
						<p> 火眼金睛，一秒辨人才 </p>
						<p> 5年来，给公司挖掘了999+人才 </p>
					</div>
					<style>
					.btnW{
						padding: 0 40px;
						box-sizing: border-box;
					}
						.btnG{
							margin-top: 7vh;
							display: flex;
							justify-content: space-between;
							color: #fff;
						}
						.btn{
							border-radius: 30px;
							border: 1px solid #fff;
							padding: 10px 35px;
						}
						.btn2{
							background-image: linear-gradient(180deg,#f7d775,#edb543);
							color: #000;
							border: 1PX solid transparent;
						}
						.btnB{
							margin-top: 3vh;
							border-radius: 30px;
							padding: 5px 35px;
							border: 1PX solid #f7d371;
							color: #f7d371;
						}
					</style>
					<div class="btnW">
						<div class="btnG">
							<div class="btn1 btn">再测一次</div>
							<div class="btn2 btn">晒出头衔</div>
						</div>
						<div class="btnB">
							<img src="images/hb.png" style="width: 35px;vertical-align: middle;"> 领取公司分红
						</div>
						<p style="font-size: 14px;color: #ccc; text-align: left;"> 说明：仅郑州、西安、北京、深圳、长沙、成都、合肥、南京、杭州、济南、天津、石家庄、咸阳、南宁的用户可领，分红为优惠券形式。 </p>
					</div>
				</div>
			</div>
		</div>
		</div>
		<div class="audio ro" style="background-image: url(images/z.png);background-repeat: no-repeat;background-position: center;background-size: 100% 100%; width: 50px;height: 50px;position: absolute;top: 20px;right: 20px;z-index: 999999999;">
		</div>

		<!-- <audio id="audio" src="./images/1.mp3" style="display: none;" loop="loop">
			当前浏览器不支持audio
		</audio> -->
		<script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/swiper.animate.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/swiper.animate1.0.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {

				$(".loadding").eq(0).css('display', 'none')
				var mySwiper = new Swiper('.swiper-container', {
					direction: 'vertical',
					// initialSlide : 21,			// 定义初始显示第几个 slide 
					preventInteractionOnTransition: true,
					observer: true,
					observeParents: true,
					speed: 800,
					effect: 'fade',
					slidesPerView: 1, // 控制每次滑动的个数
					noSwiping: true, //必须配合swiper-no-swiping,哪个滑块不需要滑动，就加这个类
					allowSlidePrev: false, // 只能下滑  不能上滑
					on: {
						init: function() {
							swiperAnimateCache(this); //隐藏动画元素 
							this.emit('slideChangeTransitionEnd'); //在初始化时触发一次slideChangeTransitionEnd事件
							swiperAnimate(this); //初始化完成开始动画
						},
						slideChangeTransitionEnd: function() {
							swiperAnimate(this); //每个slide切换结束时运行当前slide动画
							// this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); //动画只展示一次
						},
						slideChangeTransitionStart: function() {
							let idx = this.activeIndex // 当前slide索引
							console.log('当前slide索引', idx);
							// if (idx == 1) {
							// 	$(".swiper-slide").eq(1).addClass('swiper-no-swiping') // 添加禁止滑动的class
							// 	$(".swiper-slide").eq(4).addClass('swiper-no-swiping') // 添加禁止滑动的class
							// }
						},
					}
				});
				$(".ti0").click(function() {
					console.log($(this).index());
					let idx = $(this).index(); // 当前题目的索引
					$(this).eq(0).addClass('active1');
					if (idx == 0) {
						// 选择了第一题
						setTimeout(function() {
							mySwiper.slideTo(2, 1000, function() {
								console.log(222);
							});
						}, 1000)
					} else if (idx == 1) {
						setTimeout(function() {
							mySwiper.slideTo(3, 1000, function() { // mySwiper.slideTo('silde索引'，‘动画持续时间’，回调) 跳转第几个slide  
								console.log(222);
							});
						}, 1000)
					} else if (idx == 2) {
						setTimeout(function() {
							mySwiper.slideTo(3, 1000, function() {
								console.log(222);
							});
						}, 1000)
					} else if (idx == 3) {
						setTimeout(function() {
							mySwiper.slideTo(3, 1000, function() {
								console.log(222);
							});
						}, 1000)
					}
				})

				// 第二题点击
				$(".ti2").click(function() {

					console.log($(this).index());
					let idx = $(this).index(); // 当前题目的索引
					$(this).eq(0).addClass('active1');
					if (idx == 0) {
						// 选择了第一题
						setTimeout(function() {
							mySwiper.slideTo(5, 1000, function() {
								console.log(222);
							});
						}, 1000)
					} else if (idx == 1) {
						setTimeout(function() {
							mySwiper.slideTo(5, 1000, function() {
								console.log(222);
							});
						}, 1000)
					} else if (idx == 2) {
						setTimeout(function() {
							mySwiper.slideTo(5, 1000, function() {
								console.log(222);
							});
						}, 1000)
					} else if (idx == 3) {
						setTimeout(function() {
							mySwiper.slideTo(5, 1000, function() {
								console.log(222);
							});
						}, 1000)
					}

				})

				// 第三题
				$(".ti3").click(function() {
					console.log($(this).index());
					let idx = $(this).index(); // 当前题目的索引
					$(this).eq(0).addClass('active1');
					if (idx == 0) {
						// 选择了第一题
						setTimeout(function() {
							mySwiper.slideTo(9, 1000, function() {
								console.log(222);
							});
							console.log('go');
						}, 1000)
					} else if (idx == 1) {
						setTimeout(function() {
							mySwiper.slideTo(9, 1000, function() {
								console.log(222);
							});
						}, 1000)
					} else if (idx == 2) {
						setTimeout(function() {
							mySwiper.slideTo(9, 1000, function() {
								console.log(222);
							});
						}, 1000)
					} else if (idx == 3) {
						setTimeout(function() {
							mySwiper.slideTo(9, 1000, function() {
								console.log(222);
							});
						}, 1000)
					}

				})

				// 第四题
				$(".ti4").click(function() {
					console.log($(this).index());
					let idx = $(this).index(); // 当前题目的索引
					$(this).eq(0).addClass('active1');
					if (idx == 0) {
						// 选择了第一题
						setTimeout(function() {
							mySwiper.slideTo(12, 1000, function() {
								console.log(222);
							});
						}, 1000)
					} else if (idx == 1) {
						setTimeout(function() {
							mySwiper.slideTo(12, 1000, function() {
								console.log(222);
							});
						}, 1000)
					} else if (idx == 2) {
						setTimeout(function() {
							mySwiper.slideTo(12, 1000, function() {
								console.log(222);
							});
						}, 1000)
					} else if (idx == 3) {
						setTimeout(function() {
							mySwiper.slideTo(12, 1000, function() {
								console.log(222);
							});
						}, 1000)
					}
				})

				// 第五题
				$(".ti5").click(function() {

					console.log($(this).index());
					let idx = $(this).index(); // 当前题目的索引
					$(this).eq(0).addClass('active1');
					if (idx == 0) {
						// 选择了第一题
						setTimeout(function() {
							mySwiper.slideTo(17, 1000, function() {
								console.log(222);
							});
						}, 1000)
					} else if (idx == 1) {
						setTimeout(function() {
							mySwiper.slideTo(17, 1000, function() {
								console.log(222);
							});
						}, 1000)
					} else if (idx == 2) {
						setTimeout(function() {
							mySwiper.slideTo(17, 1000, function() {
								console.log(222);
							});
						}, 1000)
					} else if (idx == 3) {
						setTimeout(function() {
							mySwiper.slideTo(17, 1000, function() {
								console.log(222);
							});
						}, 1000)
					}

				})
				// 第六题
				$(".ti6").click(function() {

					console.log($(this).index());
					let idx = $(this).index(); // 当前题目的索引
					$(this).eq(0).addClass('active1');
					if (idx == 0) {
						// 选择了第一题
						setTimeout(function() {
							mySwiper.slideTo(19, 1000, function() {
								console.log(222);
							});
						}, 1000)
					} else if (idx == 1) {
						setTimeout(function() {
							mySwiper.slideTo(19, 1000, function() { // mySwiper.slideTo('silde索引'，‘动画持续时间’，回调) 跳转第几个slide  
								console.log(222);
							});
						}, 1000)
					} else if (idx == 2) {
						setTimeout(function() {
							mySwiper.slideTo(19, 1000, function() {
								console.log(222);
							});
						}, 1000)
					} else if (idx == 3) {
						setTimeout(function() {
							mySwiper.slideTo(19, 1000, function() {
								console.log(222);
							});
						}, 1000)
					}

				})
				
				$(".btn1").click(function(){
					location.reload()
				})
				$(".audio").click(function() {
					$(this).toggleClass('ro')
				})
				
				
				
			})
		</script>
	</body>
</html>
